/**
 * @developer：MR·Feng
 * 侧栏
 */

import styles from '@/styles/common/sidebar.less';

import React, { useState, useEffect } from 'react';
import { Menu } from 'antd';
import {
    PieChartOutlined,
    DesktopOutlined,
    HomeOutlined,
    AuditOutlined,
} from '@ant-design/icons';
import { Link, withRouter } from 'umi';

function Sidebar({ location }) {
    const { pathname } = location;
    const [routeurl, setRouteurl] = useState([]);
    const [collapsed] = useState(false);

    // 副作用操作
    useEffect(() => {
        let result = [pathname.replace(/^\/([^\/]*).*$/, '$1')];
        setRouteurl(result);

        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [pathname]);

    return (
        <aside className={styles.sidebars}>
            <Menu
                selectedKeys={routeurl}
                mode="inline"
                inlineCollapsed={collapsed}
            >
                <Menu.Item key="home" icon={<HomeOutlined />}>
                    <Link to="/home">首页</Link>
                </Menu.Item>
                <Menu.Item key="index" icon={<PieChartOutlined />}>
                    <Link to="/index">AK账户信息</Link>
                </Menu.Item>
                <Menu.Item key="subsidiary" icon={<DesktopOutlined />}>
                    <Link to="/subsidiary">子公司</Link>
                </Menu.Item>
                <Menu.Item key="bill" icon={<AuditOutlined />}>
                    <Link to="/bill">账单</Link>
                </Menu.Item>
            </Menu>
        </aside>
    );
}

export default withRouter(Sidebar);
